<!--
bootstrap
    - 布局容器之响应式布局（.container）
    - 响应式布局利用【栅格系统】的方式去实现

栅格系统
    - grid systems，也称为网格系统
    - 通过行（row）在水平方向上创建一组列（column）
    - 是指将页面划分为若干等宽的列，然后通过编辑列数的定义去模块化页面布局
    - 通常最多划分为12列，也就是将.container容器划分为12等份

rem与bootstrap的划分份数
    - rem
        将【屏幕宽度】划分为若干份数，
        进而实现页面元素大小的等比例缩放
    - bootstrap
        将【页面内容】划分为若干等宽的列，
        列宽随着屏幕宽度改变而改变，
        进而实现页面内容等比例缩放

栅格系统的使用
    - 参考：官网--》全局css样式
    - 具体使用：
            .container--》.row--》.col-xxx-xxx
        1）先准备.container容器（注意：容器不是必须的也不是唯一的，而是哪里需要它时才会去使用它，可以多次使用）
        2）再通过一系列的行与列的组合去创建页面布局，内容就放入到这些布局中
            .col-xs-列数    超小屏幕，<768px，固定100%      extra small
            .col-sm-列数    小屏幕，>=768px，固定750px      small
            .col-md-列数    中屏幕，>=992px，固定970px      medium
            .col-lg-列数    大屏幕，>=1200px，固定1170px    large
        注意：
            * 一行中
                总列数等于12，则占满整个.container容器
                若大于12，则多余的会被作为一个整体另起一行排列
                若小于12，则未分配的空间会留出空白
                    例如：【5-4-2-2】会被分为【第一行：5-4-2（11列+留白1列）】【第二行：2（2列+10列留白）】
                    例如：【5-5】会有2列空间留白
            * 每一列默认左右内填充15px
                padding: 0 15px;
                可以自己去掉
            * 可以同时为一列指定多个设备宽度类名，以便划分不同份数
                class="col-md-4 col-sm-6"，表示屏宽为md时，一个列宽占4/12=1/3；屏宽为sm时，一个列宽占6/12=1/2
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
    <title>栅栏系统</title>
    <style>
        div[class^="col-md-"] {
            background-color: skyblue;
            border: 1px solid #ff0000;
        }

        div[class="row"]:last-child div {
            height: 100px;
            background-color: cyan;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 一行刚好12列 -->
        <div class="row">
            <div class="col-md-5">1</div>
            <div class="col-md-4">2</div>
            <div class="col-md-1">3</div>
            <div class="col-md-2">4</div>
        </div>
        <!-- 一行小于12列 -->
        <div class="row">
            <div class="col-md-1">11</div>
            <div class="col-md-4">22</div>
            <div class="col-md-1">33</div>
            <div class="col-md-5">44</div>
        </div>
        <!-- 一行大于12列 -->
        <div class="row">
            <div class="col-md-1">111</div>
            <div class="col-md-4">222</div>
            <div class="col-md-6">333</div>
            <div class="col-md-6">444</div>
        </div>
        <!--
                多种设备宽度并存
                    lg时，一个列宽占1/4，即12/3=4
                    md时，一个列宽占1/3，即12/4=3
                    sm时，一个列宽占1/2，即12/6=2
                    xs时，一个列宽占1/1（100%），即12/12=1
             -->
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1111</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2222</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3333</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4444</div>
        </div>
    </div>
</body>

</html>